<template>
  <div>
    <div style="margin: 0 0 20px 0; display: flex; align-items: center">
      <span style="font-size: 12px; font-weight: 700">关键词：</span>
      <el-input
        clearable
        style="width: 250px"
        v-model="an.text"
        :placeholder="关键词"
      />

      <el-button
        style="color: #fff; font-size: 12px; margin-left: 30px"
        type="primary"
        color="rgb(78 168 185)"
        round
        @click="getkey()"
        >查询</el-button
      >
    </div>
    <el-table
      style="height: calc(100vh - 200px); overflow-y: scroll"
      @sort-change="pai"
      header-row-class-name="tableRowClassName"
      :data="tableData.a"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column prop="query" label="查询词" width="130" />
      <el-table-column prop="count" label="热度" sortable="custom" />

      <el-table-column prop="ca" label="转换为购物车" sortable="custom">
        <template #default="scope">
          <span style="font-weight: 700"></span>

          {{ (scope.row.ca * 100).toFixed(2) + "%" }}
          <br />
        </template>
      </el-table-column>
      <el-table-column prop="avgCaRub" label="平均价格" />
      <el-table-column prop="avgCountItems" label="出口货物">
        <template #default="scope">
          <span style="font-weight: 700"></span>

          {{ Math.ceil(scope.row.avgCountItems) }}
        </template>
      </el-table-column>

      <el-table-column prop="itemsViews" label="浏览量">
        <template #default="scope">
          <span style="font-weight: 700"></span>

          {{ Math.ceil(scope.row.itemsViews) }}
          <br />
        </template>
      </el-table-column>
      <el-table-column prop="uniqQueriesWCa" label="添加到购物车" />
      <el-table-column prop="uniqSellers" label="商品卖家">
        <template #default="scope">
          <span style="font-weight: 700"></span>

          {{ Math.ceil(scope.row.uniqSellers) }}
          <br />
        </template>
      </el-table-column>
      <el-table-column
        prop="usersWithoutInterectionCount"
        label="用户无交互数量"
      />
    </el-table>
  </div>
  <div style="margin-top: 10px; display: flex; justify-content: center">
    <el-pagination
      :total="total"
      background
      @change="fchange"
      :page-size="an.limit"
      layout="prev, pager, next"
    />
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {ketyw} from "../../api/index";
// const formatter = (row, column) => {
//   return row.address;
// };

const fchange = (e, i) => {
  an.offset = e;
  an.limit = i;
  getkey();
};
const total = ref(0);
const an = reactive({
  limit: 10,
  offset: 1,
  sorting: {
    attribute: "count",
    order: "desc",
  },
  text: "",
});
const getkey = () => {
  ketyw(an).then((result) => {
    console.log(result);
    tableData.a = result.data.data;
    total.value = result.data.total - 0;
    console.log(total.value);
  });
};
getkey();
const pai = (e) => {
  console.log(e);
  an.sorting.attribute = e.prop;
  e.order == "ascending"
    ? (an.sorting.order = "asc")
    : (an.sorting.order = "desc");

  getkey();
};
const tableData = reactive({a: []});
</script>
<style lang="scss" scoped>
:deep(.tableRowClassName .el-table__cell.is-leaf) {
  background: #eeeff3 !important;
  color: #000 !important;
}
</style>
